<template>
  <el-dialog title="学生详细信息" :close-on-click-modal="false" :visible.sync="visible" fullscreen>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="学生详情" name='first'>
        <el-form :model="dataForm" ref="dataForm" label-width="95px" size="mini">
          <el-card class="box-card">
            <div class="text item">
              <el-divider content-position="center">基本信息</el-divider>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="dataForm.name" placeholder="姓名" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="性别" prop="gender">
                    <el-select v-model="dataForm.gender" placeholder="请选择" disabled>
                      <el-option label="男" :value="0"></el-option>
                      <el-option label="女" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="出生日期" prop="birthDay">
                    <el-date-picker v-model="dataForm.birthDay" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" disabled></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="证件类型" prop="certificateType">
                    <el-select v-model="dataForm.certificateType" placeholder="请选择" disabled>
                      <el-option label="身份证" :value="1"></el-option>
                      <el-option label="护照" :value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="身份证" prop="certificateNum">
                    <el-input v-model="dataForm.certificateNum" placeholder="证件号" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系电话" prop="telPhone">
                    <el-input v-model="dataForm.telPhone" placeholder="联系电话" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col  :span="24">
                  <el-form-item label="家庭住址" prop="address">
                    <el-input v-model="dataForm.address" placeholder="家庭住址" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="出生体重" prop="birthWeight">
                    <el-input v-model="dataForm.personExtProp.birthWeight" placeholder="出生体重" readonly> <template slot="append">g</template></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否早产" prop="premature">
                    <el-radio v-model="dataForm.personExtProp.premature"  :label="1" disabled>是</el-radio>
                    <el-radio v-model="dataForm.personExtProp.premature" :label="0" disabled>否</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="早产周数" prop="preWeek">
                    <el-input v-model="dataForm.personExtProp.preWeek" placeholder="早产周数" readonly>
                      <template slot="append">周</template></el-input>
                  </el-form-item>
                </el-col>

              </el-row>

              <el-row>
                <el-col :span="8">
                  <el-form-item label="习惯用手" prop="habitHand">
                    <el-radio v-model="dataForm.personExtProp.habitHand"  label="Y" disabled>右手</el-radio>
                    <el-radio v-model="dataForm.personExtProp.habitHand" label="Z" disabled>左手</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="父亲近视史" prop="fatherMyopia">
                    <el-select v-model="dataForm.personExtProp.fatherMyopia" placeholder="请选择" disabled>
                      <el-option
                        v-for="item in bizData.myopiaData"
                        :label="item.label"
                        :value="item.value"
                        :key ="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="母亲近视史" prop="motherMyopia">
                    <el-select v-model="dataForm.personExtProp.motherMyopia" placeholder="请选择" disabled>
                      <el-option
                        v-for="item in bizData.myopiaData"
                        :label="item.label"
                        :value="item.value"
                        :key ="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="书写年龄" prop="writeAge">
                    <el-input v-model="dataForm.personExtProp.writeAge" placeholder="书写年龄" readonly>
                      <template slot="append">岁</template></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="dataForm.personExtProp.email" placeholder="邮箱" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="兴趣爱好" prop="interest">
                    <el-input v-model="dataForm.personExtProp.interest" placeholder="兴趣爱好" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-divider content-position="center">会员卡信息</el-divider>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="会员卡号" prop="customerCard">
                    <el-input v-model="dataForm.customerCard" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="会员卡类型" prop="cardType">
                    <el-input v-if="dataForm.cardType" value="会员卡" readonly></el-input>
                    <el-input v-else value="非会员" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="积分" prop="integral">
                    <el-input :value="dataForm.integral || 0" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="消费次数" prop="consumptionNumber">
                    <el-input :value="dataForm.consumptionNumber || 0" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="消费金额" prop="totalAmount">
                    <el-input :value="dataForm.totalAmount || 0" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="专属客服" prop="">
                    <el-input value="" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="主卡" prop="mainCard">
                    <el-input v-model="dataForm.mainCard" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="副卡" prop="secondaryCard">
                    <el-input v-model="dataForm.secondaryCard" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注" prop="memo">
                    <el-input v-model="dataForm.memo" readonly type="textarea"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="病例信息" name="second">
        <case-detail v-if="caseDetailVisible" ref="second" :personId="dataForm.id"></case-detail>
      </el-tab-pane>
      <el-tab-pane label="销售信息" name="third">
        <sale-detail v-if="saleDetailVisible" ref="third" :personId="dataForm.id"></sale-detail>
      </el-tab-pane>
      <el-tab-pane label="顾客回访" name="fourth">
        <return-detail  v-if="returnVisible" ref="fourth" :customerCard="dataForm.id"></return-detail>
      </el-tab-pane>
      <el-tab-pane label="顾客投诉" name="fifth">
        <complaints-detail v-if="complaintsDetailVisible" ref="fifth" :personId="dataForm.id"></complaints-detail>
      </el-tab-pane>
      <el-tab-pane label="积分记录" name="sixth">
        <integral-record v-if="integralVisible" ref="sixth" :customerCard="dataForm.id"></integral-record>
      </el-tab-pane>
      <el-tab-pane label="积分转介绍记录" name="seventh">积分转介绍记录</el-tab-pane>
      <el-tab-pane label="储值卡记录" name="eighth">
        <credit-card v-if="creditCardVisible" ref="eighth" :customerCard="dataForm.id"></credit-card>
      </el-tab-pane>
      <el-tab-pane label="挂号记录" name="ninth">挂号记录</el-tab-pane>
      <el-tab-pane label="眼部健康检查记录"  name="tenth">眼部健康检查记录</el-tab-pane>
    </el-tabs>

  </el-dialog>
</template>

<script>
    import { getPersonObj } from '@/api/pvm/person'
    import CaseDetail from './case-detail'
    import SaleDetail from './sale-detail'
    import ComplaintsDetail from './complaints'
    import ReturnDetail from './return-detail'
    import IntegralRecord from './integral-record'
    import CreditCard from './credit-card'
    import {mapGetters} from 'vuex'
    export default {
      data() {
        return {
            activeName: 'first',
            caseDetailVisible: false,
            saleDetailVisible: false,
            returnVisible: false,
            complaintsDetailVisible: false,
            integralVisible: false,
            creditCardVisible: false,
            visible: false,
            dataForm: {
                personExtProp:{}
            },
        }
      },
      computed: {
          ...mapGetters(['bizData'])
      },
      components: {
        CaseDetail,
        SaleDetail,
        ReturnDetail,
        ComplaintsDetail,
        IntegralRecord,
        CreditCard
      },
      methods: {
        init(id,name) {
          this.dataForm.id = id || 0
          this.activeName = name;
          this.visible = true
          this.$nextTick(() => {
              this.$refs['dataForm'].resetFields()
              if (this.dataForm.id) {
                getPersonObj(this.dataForm.id).then(response => {
                  if(response.data.code == '0'){
                    this.dataForm = response.data.data
                  }else{
                    this.$message.error(response.data.msg)
                  } 
                })
              }
          })
        },
        handleClick(tab, event) {
          if (tab.name == "first") {} else if (tab.name == "second") {
            this.caseDetailVisible = true
            this.$nextTick(() => {
              this.$refs.second.init(this.dataForm.id)
            })
          }else if (tab.name == "third") {
            this.saleDetailVisible = true
            this.$nextTick(() => {
              this.$refs.third.init(this.dataForm.id)
            })
          }else if (tab.name == "fourth") {
            this.returnVisible = true
            this.$nextTick(() => {
              this.$refs.fourth.init(this.dataForm.id)
            })
          }else if (tab.name == "fifth") {
            this.complaintsDetailVisible = true
            this.$nextTick(() => {
              this.$refs.fifth.init(this.dataForm.id)
            })
          }else if (tab.name == "sixth") {
            this.integralVisible = true
            this.$nextTick(() => {
              this.$refs.sixth.init(this.dataForm.id)
            })
          }else if (tab.name == "eighth") {
            this.creditCardVisible = true
            this.$nextTick(() => {
              this.$refs.eighth.init(this.dataForm.id)
            })
          }
          //  else if (tab.name == "seventh") {
          //   this.eightVisible = true
          //   this.$nextTick(() => {
          //     this.$refs.seventhTab.init(this.dataForm.customerCard)
          //   })
          // }else if (tab.name == "ninth") {
          //   this.sixVisible = true
          //   this.$nextTick(() => {
          //     this.$refs.ninthTab.init(this.dataForm.customerCard)
          //   })
          // } else if (tab.name == "tenth") {
          //   this.eightVisible = true
          //   this.$nextTick(() => {
          //     this.$refs.tenthTab.init(this.dataForm.customerCard)
          //   })
          // }
        }
      }
    }
</script>

<style lang="scss">

</style>
